.collapse {
  margin-top: calc(var(--wrap-space) * -1);
  position: relative;
  display: grid;
  transition: margin var(--layout-transition-fast);
  pointer-events: none;
}

.collapse-area {
  margin-top: calc(var(--wrap-space) - 1em);
  margin-right: -1em;
  margin-bottom: -1em;
  margin-left: -1em;
  position: relative;
  display: block;
  overflow: hidden;
  transition: margin var(--layout-transition-fast);
}

.collapse-area.is-collapsed {
  margin: 0;
}

.collapse-spacer {
  padding: 1em;
  transition: margin var(--layout-transition-fast);
}

.collapse-spacer>* {
  pointer-events: all;
}

.collapse-area.is-collapsed .collapse-spacer {
  margin-bottom: -200vh;
  position: relative;
}

.collapse-toggle .icon {
  transition: transform var(--layout-transition-fast);
}

.collapse-toggle.is-collapsed .icon {
  transform: rotate(180deg);
}

.collapse-spacer hr:first-child {
  margin-top: var(--wrap-space);
}

/* debug */
/* .collapse {
  outline: 1px dotted blue;
}

.collapse-area {
  outline: 1px solid red;
} */
